class LianZi {
    writerSize = 73;

    constructor(writerWidth) {
        this.writerSize = writerWidth;
    }


    init() {
        this.drawPaper();
        this.hzToWriter();
    }

    getData() {
        let hzArr = [];
        for (let str of data) {
            if ((/[\u4e00-\u9fa5]/).test(str)) {
                if (str.length <= 140) {
                    hzArr.push(str);
                }
            }
        }
        console.log(hzArr)
        return hzArr;
    }

    drawPaper() {
        for (let i = 0; i < 140; i++) {
            const itemHtml = this.getItemHtml('item-' + i);
            $("#paper-box").append(itemHtml);
        }
    }

    hzToWriter() {
        const hzArr = this.getData();
        for (let i = 0; i < hzArr.length; i++) {
            if (i >= 140) {
                break;
            }
            this.addHanZiWriter(hzArr[i], i);
        }


    }

    addHanZiWriter(hanZi, index) {
        const writer = HanziWriter.create('item-' + index, hanZi, {
            width: this.writerSize,
            height: this.writerSize,
            padding: 5,
            showCharacter: false,
        });
    }

    getItemHtml(id){
        return `
        <svg xmlns="http://www.w3.org/2000/svg" width="` + this.writerSize + `" height="` + this.writerSize + `" class="font-box" id="` + id + `">
            <line x1="0" y1="0" x2="` + this.writerSize + `" y2="` + this.writerSize + `" stroke="#DDD" />
            <line x1="` + this.writerSize + `" y1="0" x2="0" y2="` + this.writerSize + `" stroke="#DDD" />
            <line x1="` + this.writerSize / 2 + `" y1="0" x2="` + this.writerSize / 2 + `" y2="` + this.writerSize + `" stroke="#DDD" />
            <line x1="0" y1="` + this.writerSize / 2 + `" x2="` + this.writerSize + `" y2="` + this.writerSize / 2 + `" stroke="#DDD" />
        </svg>
    `;
    }
}







